<template>
  <div
    :style="{ right: `${right}px`, bottom: `${bottom}px` }"
    class="warp"
    @click="handleClick"
    @mousedown="startDrag"
    @touchstart="startTouchDrag"
  >
    <div class="floating-ball">
      <s-icon class="gongneng" :icon="'icon-gongneng'"></s-icon>
      <div class="deviation">
        <s-icon class="icon" :icon="'icon-faka'"></s-icon>
        <s-icon class="icon" :icon="'icon-shouye'"></s-icon>
        <s-icon class="icon" :icon="'icon-chakan'"></s-icon>
      </div>
    </div>

    <div class="ring"></div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";

const props = defineProps({
  onClick: Function,
});

const ballSize = 50;
const right = ref(100); // 初始距右边距离
const bottom = ref(100); // 初始距底部距离
const isDragging = ref(false);
let startX, startY, offsetX, offsetY, moved;

const startDrag = (event) => {
  disableTextSelection();
  isDragging.value = true;
  startX = event.clientX;
  startY = event.clientY;
  // 根据悬浮球的当前位置重新计算 offsetX 和 offsetY
  offsetX = window.innerWidth - right.value - 25 - startX;
  offsetY = window.innerHeight - bottom.value - 30 - startY;
  moved = false;

  window.addEventListener("mousemove", onMouseMove);
  window.addEventListener("mouseup", stopDrag);
};

const startTouchDrag = (event) => {
  disableTextSelection();
  event.preventDefault();
  const touch = event.touches[0];
  isDragging.value = true;
  startX = touch.clientX;
  startY = touch.clientY;
  // 同样重新计算 offsetX 和 offsetY
  offsetX = window.innerWidth - right.value - 30 - startX;
  offsetY = window.innerHeight - bottom.value - 20 - startY;
  moved = false;

  window.addEventListener("touchmove", onTouchMove, { passive: false });
  window.addEventListener("touchend", stopTouchDrag);
};

let animationFrameId = null;

const onMouseMove = (event) => {
  if (!isDragging.value) return;
  if (animationFrameId) cancelAnimationFrame(animationFrameId);

  animationFrameId = requestAnimationFrame(() => {
    updatePosition(event.clientX, event.clientY);
  });
};

const onTouchMove = (event) => {
  event.preventDefault();
  if (!isDragging.value) return;
  const touch = event.touches[0];

  if (animationFrameId) cancelAnimationFrame(animationFrameId);

  animationFrameId = requestAnimationFrame(() => {
    updatePosition(touch.clientX, touch.clientY);
  });
};

const updatePosition = (x, y) => {
  moved = true;
  const halfBallSize = ballSize / 2;
  right.value = Math.max(
    -halfBallSize,
    Math.min(
      window.innerWidth - x - offsetX - halfBallSize,
      window.innerWidth - halfBallSize
    )
  );
  bottom.value = Math.max(
    -halfBallSize,
    Math.min(
      window.innerHeight - y - offsetY - halfBallSize,
      window.innerHeight - halfBallSize
    )
  );
};

const stopDrag = () => {
  enableTextSelection();
  isDragging.value = false;
  window.removeEventListener("mousemove", onMouseMove);
  window.removeEventListener("mouseup", stopDrag);

  if (!moved && props.onClick) {
    props.onClick();
  }
};

const stopTouchDrag = () => {
  enableTextSelection();
  isDragging.value = false;
  window.removeEventListener("touchmove", onTouchMove);
  window.removeEventListener("touchend", stopTouchDrag);

  if (!moved && props.onClick) {
    props.onClick();
  }
};

function disableTextSelection() {
  document.body.style.userSelect = "none";
  document.body.style.msUserSelect = "none"; // 针对 IE 浏览器
  document.body.style.mozUserSelect = "none"; // 针对 Firefox 浏览器
}

function enableTextSelection() {
  document.body.style.userSelect = "";
  document.body.style.msUserSelect = "";
  document.body.style.mozUserSelect = "";
}

const handleClick = () => {
  // 处理点击逻辑
};
</script>

<style scoped lang="scss">
.deviation {
  position: absolute;
  opacity: 1;
  left: 0px;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 999;
  transition: all 1s;
  .icon {
    transition: all 1s;
    position: absolute;
    opacity: 0;
    top: 10px;
    left: 11px;
    font-size: 18px;
  }
}

.gongneng {
  font-size: 20px;
}
.warp:hover {
  .floating-ball {
    background-color: #f8f8f8; /* 悬停时的背景色 */
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3); /* 悬停时的阴影 */
  }
  .deviation {
    opacity: 1;
  }
  .deviation .icon {
    opacity: 1;
  }
  .deviation .icon:nth-child(1) {
    top: -23px;
    left: 11px;
  }
  .deviation .icon:nth-child(2) {
    left: 45px;
  }
  .deviation .icon:nth-child(3) {
    left: -23px;
  }

  .ring {
    opacity: 1;
  }
}
.warp {
  position: absolute;
  cursor: grab;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-ball {
  width: 36px;
  height: 36px;
  border: 1px solid rgb(194, 193, 193);
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 黑色阴影 */

  border-radius: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-ball:active {
  cursor: grabbing;
}

.ring {
  position: absolute;
  width: 100px;
  transition: all 1s;
  height: 100px;
  border: 1px solid rgb(194, 193, 193);
  background-color: rgb(228, 228, 228, 0.3);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 黑色阴影 */
  opacity: 1;
  border-radius: 50%;
  z-index: 1;
}
</style>